<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" >
        <a-form-model-item label="商品类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="treeSelectMultiple">
            <a-input @click="openModal" placeholder="请点击选择商品类目" v-model="categoryNames" readOnly >
              <a-icon slot="prefix" type="cluster" title="部门选择控件"/>
              <a-icon v-if="categoryIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
            </a-input>
            <GoodsCategoryTree 
            ref="categorySelectModal" 
            :category-ids="categoryIds"
            :currentChecked="currentChecked"
            @updateCategory="updateCategory" 
            @initComp="initComp">
            </GoodsCategoryTree>
          </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
  import GoodsCategoryTree from './GoodsCategoryTree'
  import { getAction } from '@/api/manage'
  import {addProductCatePermission } from '@/api/goods'
  export default {
    components:{
      GoodsCategoryTree
    },
    data() {
      return {
        title:"授权类目",
          width:800,
          visible: false,
          model: {},
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
        confirmLoading:false,
        categoryNames:"",
        categoryIds:'',
        updateChecked:[],
        currentChecked:[],
        tagId:''
      }
    },
    methods: {
      show(record,result){
        this.tagId = record.id
        this.categoryIds = result
        this.currentChecked = result.split(',')
        this.visible=true
      },
      handleOk(){
        let params = {
          sysCateId:this.tagId,
          ids:this.categoryIds
        }
        addProductCatePermission(params).then(res => {
          if(res.success){
            this.$message.success(res.message)
            this.handleCancel()
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      handleCancel(){
        this.visible=false
        this.categoryIds = ''
      },
      openModal(){
        this.$refs.categorySelectModal.show()
      },
      handleEmpty(){
        this.categoryNames = ''
        this.categoryIds = ''
      },
      updateCategory(rows){
        console.log(rows)
        this.updateChecked = rows
        this.categoryNames = rows.map(item => item.title).toString()
        this.categoryIds = rows.map(item => item.key).toString()
      },
      initComp(categoryNames){
        this.categoryNames = categoryNames
      }
    },
  }
</script>